<template>
  <NuxtLayout>
    <div class="main-container">
      <div class="report">
        <div v-if="reportInfo.resultShow" class="score">
          <span class="user"> {{ reportInfo.userScore ? reportInfo.userScore : 0 }}</span> 分
          <el-tag v-if="reportInfo.passStatus === 1" type="success">待阅卷</el-tag>
          <el-tag v-if="reportInfo.passStatus === 2" type="success">合格</el-tag>
          <el-tag v-if="reportInfo.passStatus === 3" type="danger">不及格</el-tag>
        </div>
        <div v-else class="score">
          <span class="user">*</span> 分
          <el-tag type="primary">等待公布</el-tag>
        </div>
        <!--
        <span v-if="!reportInfo.resultShowRank">
          <span>{{ reportInfo.rankNo }}</span>
        </span>
        -->
        <el-divider />
        <div class="desc">
          本次考试为【
          <common-enum-view :enum-value="reportInfo.evaluationMethod" :enum-name="'EvaluationMethod'" />
          】，
          <span v-if="reportInfo.evaluationMethod === 1">仅统计客观题(单选题、多选题、判断题)，若后期人工干预评阅主观题(填空题、简答题)，则最终以人工评阅结果为准。</span>
          <span v-if="reportInfo.evaluationMethod === 2">考试成绩需老师批阅后方可查看。</span>
        </div>
        <div class="score-detail">
          <el-space wrap :size="20">
            <el-result sub-title="试卷总分">
              <template #icon>
                {{ reportInfo.totalScore ? reportInfo.totalScore : 0 }}
              </template>
            </el-result>
            <el-result sub-title="考试用时">
              <template #icon>{{ formatTime(reportInfo.userAnswerTime) }}</template>
            </el-result>
            <el-result sub-title="题目总数">
              <template #icon>{{ reportInfo.questionCount ? reportInfo.questionCount : 0 }}</template>
            </el-result>
            <el-result sub-title="历史最高分">
              <template #icon>
                <span v-if="reportInfo.resultShow">{{ reportInfo.historyHighestScore ? reportInfo.historyHighestScore : 0 }}</span>
                <span v-if="!reportInfo.resultShow">-</span>
              </template>
            </el-result>
            <el-result sub-title="客观题得分">
              <template #icon>
                <span v-if="reportInfo.resultShow">{{ reportInfo.objectiveQuestionScore ? reportInfo.objectiveQuestionScore : 0 }}</span>
                <span v-if="!reportInfo.resultShow">-</span>
              </template>
            </el-result>
            <el-result sub-title="主观题得分">
              <template #icon>
                <span v-if="reportInfo.resultShow">{{ reportInfo.subjectiveQuestionScore ? reportInfo.subjectiveQuestionScore : 0 }}</span>
                <span v-if="!reportInfo.resultShow">-</span>
              </template>
            </el-result>
            <el-result sub-title="正确题数">
              <template #icon>
                <span v-if="reportInfo.resultShow">{{ reportInfo.questionCorrectCount ? reportInfo.questionCorrectCount : 0 }}</span>
                <span v-if="!reportInfo.resultShow">-</span>
              </template>
            </el-result>
            <el-result sub-title="错误题数">
              <template #icon>
                <span v-if="reportInfo.resultShow">{{ reportInfo.questionErrorCount ? reportInfo.questionErrorCount : 0 }}</span>
                <span v-if="!reportInfo.resultShow">-</span>
              </template>
            </el-result>
          </el-space>
        </div>

        <div class="report-btn">
          <el-button size="large" plain @click="goBack">返回列表</el-button>
          <el-button v-if="reportInfo.startExam" size="large" plain @click="handleStart">再考一次</el-button>
          <el-button size="large" type="primary" @click="handleAnalysis">查看试卷</el-button>
        </div>
      </div>
    </div>
  </NuxtLayout>
</template>
<script setup>
  import { examApi } from '~/api/exam'
  import { formatTime } from '~/utils/base'

  const route = useRoute()
  const reportInfo = reactive({})

  // 查看试卷
  const handleAnalysis = () => {
    useRouter().push({ name: 'exam-analysis', query: { recordId: route.query.recordId } })
  }

  // 再考一次
  const handleStart = () => {
    useRouter().push({ name: 'exam-start', query: { id: route.query.id, examType: reportInfo.examType } })
  }

  // 返回列表
  const goBack = () => {
    useRouter().push({ name: 'exam-detail', query: { id: route.query.id } })
  }

  onMounted(async () => {
    // 获取模拟结果
    const res = await examApi.examReport({ recordId: route.query.recordId })
    Object.assign(reportInfo, res)
  })
</script>
<style lang="scss" scoped>
  .report {
    width: 500px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    font-size: 16px;

    .score {
      text-align: center;

      .user {
        font-size: 50px;
        color: red;
      }
    }

    .score-detail {
      background-color: #f5f5f4;
      border-radius: 5px;
      padding: 20px;
      margin: 20px auto;

      .el-result {
        width: 100px;
        padding: 10px 0;
      }
    }

    .report-btn {
      text-align: center;
      line-height: 60px;

      .el-button {
        width: 300px;
        margin-left: 0;
      }
    }
  }
</style>
